<ul>
  <li>When you move your mouse ("hover") over the live preview area, you'll notice that the page element under your
    mouse pointer gets
    highlighted: Semi-transparent boxes are put behind and above the element to visualize its dimensions and, if any,
    its margin ("outer space"), its
    padding ("inner space") and its borders.
  </li>
  <li>When you <strong>Right-Click</strong> on an element, a little window pops ups. In this window you can adjust the
    CSS of the element by
    picking colors, selecting options and adjusting sizes with a slider.
  </li>
  <li>While you edit the settings in that pop-up CSS form, you can view the changes being applied to the live preview in
    real-time
  </li>
  <li>What you see is just a "this is what it would look like if you changed the CSS like that" kind of preview "faked"
    by Javascript.
  </li>
  <li>To apply the settings for real, click the "Save" button on the top right of the little CSS popup window.</li>
  <li>Usual CSS parent->child inheritance applies and may sometimes lead to unexpected results in the Live Preview. If
    you edit one setting that single setting will
    be adjusted here in the live preview - it won't re-render the whole page. Click the current page template's menu
    button on the left
    (i.e. "index.php") again to reload the live preview, for an accurate preview.
  </li>
</ul>